<template>
   <m-layout>
     <mt-header slot="header" title="查看测试成绩">
       <m-header-back slot="left"/>
     </mt-header>
     <div slot="body">
       <m-section class="student-info">
         <m-flexbox class="student" align="center">
           <e-avatar class="student-avatar" :src="curStudent.headPicture"/>
           <div class="student-name small">
             <div>姓名</div>
             <div>{{curStudent.age}}</div>
             <div>年龄</div>
           </div>
         </m-flexbox>
         <mt-cell title="年龄组" is-link>{{curAgeDic.ageType}}</mt-cell>
         <m-select class="age-select" v-model="selectValue">
           <m-option :value="item.id" v-for="item in ageDicts" :key="item.id" :label="item.ageType">
             {{item.ageType}}
           </m-option>
         </m-select>
       </m-section>
       <m-section class="test-scores">
         <m-section class="test-scores-list">
           <m-flexbox class="test-scores-title"  justify="space-between">
             <e-heading>最近测试成绩</e-heading>
             <div class="blue" @click="handleLevelExplain">评级解释</div>
           </m-flexbox>
           <m-flexbox class="test-scores-item weak" justify="space-between">
             <div>重点维度</div>
             <div>测试方式</div>
             <div>测试时间&结果</div>
           </m-flexbox>
           <m-flexbox class="test-scores-item small" justify="space-between" v-for="item in lastScoreGroup" :key="item.testModeId">
             <div>{{item.testModeName}}</div>
             <div>
               <router-link :to="{path: '/smartCourse/scoresCriteria',
                                 query: {
                                   studentId: curStudent.studentId,
                                   testItemText: item.testModeName,
                                   testItemId: item.testModeId,
                                   ageGroupText: curAgeDic.ageType,
                                   ageGroupId: curAgeDic.id,
                                   testContentId: item.lastScore[0].testMethodId
                                 }}">
                 {{item.lastScore[0].testMethodName}}
               </router-link>
             </div>
             <div v-if="item.lastScore[0].testScore">
               <router-link :to="{path: '/smartCourse/singleTestScores',
                                  query: {
                                    studentId: curStudent.id,
                                    curAge: curAgeDic.id,
                                    testModeId: item.testModeId,
                                    testMethodId: item.lastScore[0].testMethodId,
                                    testItemText: item.testModeName,
                                    ageGroupText: curAgeDic.ageType,
                                    testMethodName: item.lastScore[0].testMethodName
                                  }}">
                 <div class="weak">{{new Date(item.lastScore[0].testDate).format()}}</div>
                 <div class="test-scores-result">
                   <span v-if="item.lastScore[0].testScoreType===1">{{item.lastScore[0].testScore}}{{item.lastScore[0].testScoreDesc}}（{{item.lastScore[0].testScoreLevel}}）</span>
                   <span v-else>{{item.lastScore[0].testScoreLevel}}（{{item.lastScore[0].testScoreLevel}}）</span>
                 </div>
               </router-link>
             </div>
             <div v-else class="weak">
               <p>暂无成绩</p>
             </div>
           </m-flexbox>
         </m-section>
       </m-section>
     </div>
   </m-layout>
</template>

<script>
import { mapState } from 'vuex'
import { MessageBox } from 'mint-ui'
export default {
  computed: {
    ...mapState({
      curStudent: state => state.smartCourse.curStudent,
      ageDicts: state => state.smartCourse.ageDicts,
      lastScoreGroup: state => state.smartCourse.lastScoreGroup
    })
  },
  data () {
    return {
      selectValue: 0,
      curAgeDic: {},
      ExplainHtml: `<div class="ExplainHtml">
                     姚明篮球俱乐部通过定期对于七个重点维度的评测，全方位的评估各青少年篮球运动员的运动概况以及针对于这些重点维度的技巧掌握情况，应用专业的评测方式，可量化的表示球员的各项篮球能力。
                     <p>评级解释：</p>
                     <div>A+&nbsp;&nbsp;&nbsp;卓越</div>
                     <div>A&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;精通</div>
                     <div>B&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;良好</div>
                     <div>C&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;掌握</div>
                     <div>D&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;待提高</div>
                   </div>`
    }
  },
  watch: {
    selectValue (newValue, oldValue) {
      if (oldValue && +newValue !== +oldValue) {
        this.curAgeDicChange(newValue)
      }
    }
  },
  mounted () {
    this.getLastScoreGroup()
  },
  methods: {
    handleLevelExplain () {
      MessageBox({
        title: '',
        message: this.ExplainHtml,
        showCancelButton: true
      })
      MessageBox.parse()
    },
    getAgeDicts () {
      return this.$store.dispatch('smartCourse/getAgeDicts')
    },
    studentInfo () {
      return this.$store.dispatch('smartCourse/studentInfo', {
        studentId: this.$route.query.studentId
      })
    },
    getLastScoreGroup () {
      Promise.all([this.studentInfo(), this.getAgeDicts()]).then(() => {
        this.curAgeDicChange(this.curStudent.testAgeId)
      })
    },
    curAgeDicChange (ageId) {
      this.ageDicts.forEach((item) => {
        if (item.id === +ageId) {
          this.curAgeDic = item
        }
      })
      this.selectValue = this.curAgeDic.id
      this.$store.dispatch('smartCourse/getLastScoreGroup', {
        studentId: this.$route.query.studentId,
        ageDictId: this.curAgeDic.id,
        sportType: 3002 // 暂时写死（篮球类型）
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.student-info{
  position: relative;
}
.student{
  height: 1.9rem;
  padding-left: 0.4rem;
  &-avatar{
    width: 0.8rem;
    height: 0.8rem;
  }
  &-name{
    margin-left: 0.2rem;
  }
}
.age-select{
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 0.9rem;
  bottom: 0;
}
.test-scores{
  &-title{
    padding-right: 0.3rem
  }
  &-list{
    .test-scores-item{
      height: 1rem;
      padding: 0 0.4rem;
      .test-scores-result{
        text-align: right;
      }
    }
  }
}
.ExplainHtml{
  text-align: left;
}
</style>
